<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="/admintemplate.xhtml">
        <ui:define name="title">
            <h:outputText value="#{bundle.EditStaffTitle}"></h:outputText>
        </ui:define>
        <ui:define name="leftmenu">
            <h:form>
                <ul class="section menu">
                    <li><a class="menuitem">#{bundle.ControlPanelMenu}</a>
                        <ul class="submenu">
                            <li><h:commandLink action="#{staffController.prepareCreate}" value="#{bundle.ListStaffCreateLink}"/> </li>
                            <li><h:commandLink action="#{staffController.prepareList}" value="#{bundle.CreateStaffShowAllLink}" immediate="true"/> </li>
                        </ul>
                    </li>
                </ul>
            </h:form>
        </ui:define>
        <ui:define name="content">
            <h2>#{bundle.EditStaffTitle}</h2>
            <div class="block">
                <h:panelGroup id="messagePanel" layout="block">
                    <h:messages errorStyle="color: red" infoStyle="color: green" layout="list"/>
                </h:panelGroup>
                <h:form>
                    <table class="form">

                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_staffId}" for="staffId" />
                            </td>
                            <td class="col2">
                                <h:inputText id="staffId" readonly="true" class="readonly" value="#{staffController.selected.staffId}" title="#{bundle.EditStaffTitle_staffId}" required="true" requiredMessage="#{bundle.EditStaffRequiredMessage_staffId}"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_type}" for="type" />
                            </td>
                            <td class="col2">
                                <h:selectOneMenu id="type" value="#{staffController.selected.type}" title="#{bundle.EditStaffTitle_type}" required="true" requiredMessage="#{bundle.EditStaffRequiredMessage_type}">  
                                    <f:selectItem itemLabel="Administrator" itemValue="1" />  
                                    <f:selectItem itemLabel="Staff" itemValue="0" />  
                                </h:selectOneMenu>
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_userName}" for="userName" />
                            </td>
                            <td class="col2">
                                <h:inputText id="userName" value="#{staffController.selected.userName}" title="#{bundle.EditStaffTitle_userName}" required="true" requiredMessage="#{bundle.EditStaffRequiredMessage_userName}"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_password}" for="password" />
                            </td>
                            <td class="col2">
                                <h:inputSecret id="password" value="#{staffController.selected.password}" title="#{bundle.EditStaffTitle_password}" required="true" requiredMessage="#{bundle.EditStaffRequiredMessage_password}"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_fullName}" for="fullName" />
                            </td>
                            <td class="col2">
                                <h:inputText id="fullName" value="#{staffController.selected.fullName}" title="#{bundle.EditStaffTitle_fullName}" />
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_address}" for="address" />
                            </td>
                            <td class="col2">
                                <h:inputText id="address" value="#{staffController.selected.address}" title="#{bundle.EditStaffTitle_address}" />
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_dateOfBirth}" for="dateOfBirth" />
                            </td>
                            <td class="col2">
                                <p:calendar id="dateOfBirth" yearRange="-50:0+" value="#{staffController.selected.dateOfBirth}" pattern="MM/dd/yyyy" showOn="button" title="#{bundle.EditStaffTitle_dateOfBirth}" /> 
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_gender}" for="gender" />
                            </td>
                            <td class="col2">
                                <h:selectOneMenu id="gender" value="#{staffController.selected.gender}" title="#{bundle.CreateStaffTitle_gender}" >  
                                    <f:selectItem itemLabel="Male" itemValue="1" />  
                                    <f:selectItem itemLabel="FeMale" itemValue="0" />  
                                </h:selectOneMenu>
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_email}" for="email" />
                            </td>
                            <td class="col2">
                                <h:inputText id="email" value="#{staffController.selected.email}" title="#{bundle.EditStaffTitle_email}" />
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">
                                <h:outputLabel value="#{bundle.EditStaffLabel_phone}" for="phone" />
                            </td>
                            <td class="col2">
                                <h:inputText id="phone" value="#{staffController.selected.phone}" title="#{bundle.EditStaffTitle_phone}" />
                            </td>
                        </tr>
                    </table>
                    <h:commandLink action="#{staffController.update}" class="btn-icon btn-teal btn-plus btn-small">
                        <span></span>
                        #{bundle.EditStaffSaveLink}
                    </h:commandLink>&nbsp;
                    <h:link outcome="View" class="btn-icon btn-teal btn-arrow-right btn-small">
                        <span></span>
                        #{bundle.EditStaffViewLink}
                    </h:link>
                </h:form>
            </div>
        </ui:define>
        <ui:define name="bottom">
            <h:form>
                <script type="text/javascript">
                    //For calendar
                    $(function() {
                        $("input[id$='endDate'], input[id$='startDate']").datepicker({
                            dateFormat: 'mm/dd/yy',
                            showOn: "button",
                            buttonImage: "../../resources/img/calendar.gif",
                            buttonImageOnly: true
                        });
                        
                        $('input[type="checkbox"]').fancybutton();
                    });

                </script>
            </h:form>
        </ui:define>
    </ui:composition>

</html>
